<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }

        .bo {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script src="../js/jquery.js"></script>

    <script>
        $(".box").click((e) => {
            let x = e.offsetX;
            let y = e.offsetY;
            let arr = [x, y];
            // console.log(arr)
            let boll = $("<div class='bo'></div>")
            weizhi(boll, arr);
            $(".box").append(boll);
            $(boll).animate({
                top: arr[1]
            }, 2000);
            setTimeout(() => {
                $(boll).remove();
                for (let i = 0; i < 360; i = i + 24) {
                    let boll1 = $("<div></div>");
                    $(boll1).css({
                        position: "absolute",
                        width: 10,
                        height: 10,
                        borderRadius: "50%",
                        left: arr[0],
                        background: "#999",
                        top: arr[1],
                    })
                    let arr1 = [];
                    let x1 = (Math.sin(i) * 80 + arr[0]);
                    let y1 = (Math.cos(i) * 80 + arr[1]);
                    arr1 = [x1, y1];

                    feile(boll1, arr1)
                    $(".box").append(boll1)
                    setTimeout(() => {
                        for (let i = 0; i < 360; i = i + 24) {
                            let boll2 = $("<div></div>");
                            $(boll2).css({
                                position: "absolute",
                                width: 10,
                                height: 10,
                                borderRadius: "50%",
                                left: arr1[0],
                                background: "#999",
                                top: arr1[1],
                            })
                            let x2 = (Math.sin(i) * 80 + arr1[0]);
                            let y2 = (Math.cos(i) * 80 + arr1[1]);
                            let arr2 = [x2, y2];
                            feile(boll2, arr2)
                            $(".box").append(boll2)
                        }
                    }, 2000)
                    // $(boll1).animate({
                    //     left: arr1[0],
                    //     top: arr1[1],
                    // }, 2000)

                }
            }, 2100)

        })

        function weizhi(boll, arr) {
            $(boll).css({
                left: arr[0]
            })
        }

        function feile(boll1, arr1) {
            $(boll1).animate({
                left: arr1[0],
                top: arr1[1]
            }, 2000, () => {
                boll1.remove()
            })
        }


    </script>
</body>

</html>